<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners"  @close="onClose"  :visible.sync="show" title="Dialog Titile">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="请输入用户名" clearable :style="{width: '100%'}" disabled="disabled">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="departmentId">
              <el-select v-model="formData.departmentId" placeholder="请选择部门" clearable
                :style="{width: '100%'}">
                <el-option v-for="(item, index) in deList" :key="index" :label="item.name"
                  :value="item.id" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formData.nickname" placeholder="请输入昵称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formData.sex" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机" prop="phoneNumber">
              <el-input v-model="formData.phoneNumber" placeholder="请输入手机" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日" prop="birth">
              <el-date-picker v-model="formData.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {getUpdate,updateUser} from '../../api/user'

export default {
  inheritAttrs: false,
  props: {
    updateDialog:{
      type:Boolean,
      defaultValue:false,
    },
    id:{
      type:Number,
      defaultValue: null,
    },
    deList:{
      type:Array,
      defaultValue: null,
    }
  },
  data() {
    return {
      formData: {
        id:this.id,
        username: undefined,
        departmentId: 1,
        nickname: undefined,
        sex: 0,
        email: undefined,
        phoneNumber: undefined,
        birth: null,
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        departmentId: [{
          required: true,
          message: '请选择部门',
          trigger: 'change'
        }],
        nickname: [{
          required: true,
          message: '请输入昵称',
          trigger: 'blur'
        }],
       /* sex: [{
          required: true,
          message: '性别不能为空',
          trigger: 'change'
        }],*/
        email: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        phoneNumber: [{
          required: true,
          message: '请输入手机',
          trigger: 'blur'
        }],
        birth: [{
          required: true,
          message: '请选择生日',
          trigger: 'change'
        }],
      },
      /*departmentIdOptions: [],*/
      sexOptions: [{
        "label": "男",
        "value": 0
      }, {
        "label": "女",
        "value": 1
      },{
        "label": "保密",
        "value": null
      }
      ],
      show:false,

    }
  },
  watch: {
    updateDialog(newVal,oldVal){
      this.show=newVal;
    },
    id(newVal,oldVal){
      this.getUser(newVal);
    }
  },
  methods: {
    onOpen() {},
    onClose() {
      /*this.$refs['elForm'].resetFields();*/
      this.$emit('updateShow', false);
    },
    close() {
      this.$emit('update:visible', false)
      this.$emit('updateShow', false);
    },
    handelConfirm() {
      var $this=this;
      this.$refs['elForm'].validate(valid => {
        if (!valid){
          return
        }
        updateUser(this.formData)
          .then(function (response) {
            if (response.data.code==20000) {
              $this.$emit('updateShow', true);
              $this.$message.success("修改成功！");
            }else {
              $this.$emit('updateShow', false);
              $this.$message.error(response.data.message);
            }
          })
          .catch(function (erro) {
            console.log("获取失败")
          })
      })
    },
    getUser(id){
      var $this=this;
      getUpdate(id)
        .then(function (response) {
          $this.formData=response.data.data.user;
        })
        .catch(function (erro) {
          console.log("获取失败")
        })
    }

  },
  created:function () {

  }
}

</script>
<style>
</style>
